<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Problem - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style>
        .ui-autocomplete-loading { background: white url('img/ui-anim_basic_16x16.gif') right center no-repeat; }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 3px;

            font-size:11px;
            line-height: 12px;
        }
        /* IE 6 doesn't support max-height
         * we use height instead, but this forces the menu to always be this tall
         */
        * html .ui-autocomplete {
            height: 200px;
        }
    </style>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/problemset}">[[#{problems}]]</a>
                <a th:href="@{/problemset/status}">[[#{status}]]</a>
                <a th:href="@{/problemset/standings}">[[#{standings}]]</a>
                <a th:href="@{/admin/problem/new}" class="current" th:if="${session.session_user_admin}">[[#{new-problem}]]</a>
            </div>
            <div class="problem-edit-box">
                <form action="" method="post">
                    <div class="problem-params" style="width: 99%">
                        <table>
                            <tr>
                                <td style="width: 200px">
                                    <span>[[#{problem.time_limit}]] ms</span> : <input class="problem-time-input" name="time-limit" th:placeholder="#{problem.time_limit}" th:value="${problem.time_limit}" maxlength="20">
                                </td>
                                <td style="width: 200px">
                                    <span>[[#{problem.memory_limit}]] kb</span> : <input class="problem-time-input" name="memory-limit" th:placeholder="#{problem.memory_limit}" th:value="${problem.memory_limit}" maxlength="20">
                                </td>
                                <td style="width: 260px">
                                    <span>OJ Name</span> : <input class="problem-oj-input" name="oj-name" th:placeholder="OJ" th:value="${problem.oj_name}" maxlength="40">
                                </td>
                                <td style="width: 200px">
                                    <span>Disable</span> :
                                    <select class="problem-time-input problem-disble-option" name="disable">
                                        <option value="N" th:if="${problem.defunct=='N'}" selected="selected">NO</option>
                                        <option value="Y" th:if="${problem.defunct=='N'}">YES</option>
                                        <option value="N" th:if="${problem.defunct!='N'}" >NO</option>
                                        <option value="Y" th:if="${problem.defunct!='N'}" selected="selected" >YES</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                        <div class="tags-autocomplete-select">
                            <div class="tags">
                                <a id="add-tags-button" class="add-tags-button tag">
                                    <svg class="add-tag-icon" viewBox="0 0 1024 1024" p-id="4279"><path d="M811.243897 474.271724 543.496853 474.271724 543.496853 212.752522c0-17.396205-14.102183-31.499411-31.498388-31.499411s-31.500435 14.104229-31.500435 31.499411l0 261.519202L212.75508 474.271724c-17.396205 0-31.499411 14.103206-31.499411 31.497365 0 17.397229 14.104229 31.500435 31.499411 31.500435l267.743974 0 0 273.977955c0 17.379832 14.104229 31.500435 31.500435 31.500435s31.498388-14.120602 31.498388-31.500435L543.497876 537.269523l267.74602 0c17.396205 0 31.498388-14.103206 31.498388-31.500435C842.742285 488.37493 828.640102 474.271724 811.243897 474.271724z" p-id="4280"></path></svg>
                                    [[#{tag}]]
                                </a>
                                <span class="add-tags-items"></span>
                            </div>
                            <input type="hidden" id="submit-tags" class="problem-tag" name="tagList" th:value="${problem.tag}"/>
                            <div id="tags-autocomplete-select-menu" class="tags-autocomplete-select-menu small-scrollbar">
                                <input id="input-tags" autocomplete="off" class="input-tags" th:placeholder="#{search}"></input>
                                <div class="tags-autocomplete-select-items">
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="problemId" th:value="${problem.problem_id}" >
                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">
                            <div class="pretty-edit-box-name">[[#{problem.title}]]</div>
                            <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/128</div>
                        </div>
                        <input class="pretty-edit-box-text" name="title" maxlength="128"
                               th:placeholder="#{problem.input_title}" th:value="${problem.title}">
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.description}]]</div>
                        <div class="editor-md" id="editor-problem-desc">
                            <textarea name="description" style="display:none;" th:utext="${problem.description}"></textarea>
                        </div>
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.input}]]</div>
                        <div class="editor-md" id="editor-problem-input-desc">
                            <textarea name="input" style="display:none;" th:utext="${problem.input}"></textarea>
                        </div>
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.output}]]</div>
                        <div class="editor-md" id="editor-problem-output-desc">
                            <textarea name="output" style="display:none;" th:utext="${problem.output}"></textarea>
                        </div>
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.sample_input}]]</div>
                        <textarea class="pretty-edit-box-text small-scrollbar" name="sample-input" rows="4" th:utext="${problem.sample_input}"></textarea>
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.sample_output}]]</div>
                        <textarea class="pretty-edit-box-text small-scrollbar" name="sample-output" rows="4" th:utext="${problem.sample_output}"></textarea>
                    </div>

                    <div class="pretty-edit-box">
                        <div class="pretty-edit-box-title">[[#{problem.note}]]</div>
                        <div class="editor-md" id="editor-problem-note-desc">
                            <textarea name="note" style="display:none;" th:utext="${problem.hint}"></textarea>
                        </div>
                    </div>
                    <div style="margin-top: 12px;">
                        <input class="button_submit" type="submit" th:value="#{topic.btn_post}" >
                        <span class="fielderror"></span>
                    </div>
                </form>
            </div>
            <br>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<script type='text/javascript' th:src="@{/js/messager.js}"></script>
<script type='text/javascript' th:src='@{/js/tags.js}'></script>
<script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
<script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
<script type="text/javascript">
    $(document).ready(function () {
        var formSubmitListener = function () {
            var id = $(this).find("input[name=problemId]").val();
            var timeLimit = $(this).find("input[name=time-limit]").val();
            var memLimit = $(this).find("input[name=memory-limit]").val();
            var ojName = $(this).find("input[name=oj-name]").val();
            var title = $(this).find("input[name=title]").val();
            var desc = $(this).find("textarea[name=description]").val();
            var input = $(this).find("textarea[name=input]").val();
            var output = $(this).find("textarea[name=output]").val();
            var sampleInput = $(this).find("textarea[name=sample-input]").val();
            var sampleOutput = $(this).find("textarea[name=sample-output]").val();
            var note = $(this).find("textarea[name=note]").val();
            var disable = $('.problem-disble-option option:selected').val();
            var tags = $(this).find("input[name=tagList]").val();
            postContent = function () {
                $.post("/api/admin/problem/post",
                    {
                        problemId:id,
                        timeLimit:timeLimit,
                        memLimit:memLimit,
                        ojName:ojName,
                        disable:disable,
                        title:title,
                        desc:desc,
                        input:input,
                        output:output,
                        sampleInput:sampleInput,
                        sampleOutput:sampleOutput,
                        note:note,
                        tags:tags,
                    },
                    function (data) {
                        if (data.code != 200) {
                            $(".fielderror").html(data.msg);
                            $("#reply-content").focus();
                            return;
                        }

                        $('input[type=submit]', this).attr('disabled', 'disabled');
                        $('.button_submit').attr('disabled', 'disabled');
                        window.location.href="/problemset";
                    },
                    "json"
                );
            };
            postContent();
            return false;
        }
        $(".problem-edit-box").find("form").submit(formSubmitListener);
        $("textarea[name='sample-input']").autoHeight();
        $("textarea[name='sample-output']").autoHeight();
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        OnlineJudge.prettyEditBox();
    })
</script>
</body>
</html>
